import React, { useState, useEffect } from "react";
import "@/assets/css/setting.scss";
import { Popup } from "antd-mobile";
import HeadBack from "@/components/HeadBack";
import arrowImg from "@/assets/images/arrowImg.png";
import selectCurImg from "@/assets/images/selectCurImg.png";
import selectImg from "@/assets/images/selectImg.png";
import {
    getClockSetting,
    setClockSetting,
} from "@/utils/dataUtil";
import { Toast } from "antd-mobile";
import { useLocation } from "react-router-dom";
import ExitCompany from "@/components/ExitCompany";

const currentDayArr = [
    { name: "周一", day: 1, click: false },
    { name: "周二", day: 2, click: false },
    { name: "周三", day: 3, click: false },
    { name: "周四", day: 4, click: false },
    { name: "周五", day: 5, click: false },
    { name: "周六", day: 6, click: false },
    { name: "周日", day: 7, click: false },
];

export default function Setting() {
    const location = useLocation();

    //设置日常打卡弹出层
    const [visibleDay, setVisibleDay] = useState(false);

    //日常打卡数据设置数组
    const [dayArr, setDayArr] = useState(currentDayArr);
    const [dayArrs, setDayArrs] = useState(currentDayArr);

    //点击设置日常打卡取消按钮
    const clickDayBtnCancel = () => {
        //点击取消按钮
        setVisibleDay(false);
        setDayArr(dayArrs);
    };

    //点击设置日常打卡确定按钮
    const clickDayBtnFix = () => {
        //点击确定按钮
        setVisibleDay(false);
        let params = dayArr.filter((items) => items.click).map((item) => item.day);
        if (params.length === 0) {
            Toast.show({
                content: "你已完成一键打卡",
                maskClickable: false,
            });
            return;
        }
        setClockSetting(params).then((res) => {
            if (res.status === 1) {
                Toast.show({
                    content: "设置成功",
                    maskClickable: false,
                });
                setDayArrs(dayArr);
            }
        });
    };

    //点击每一个设置日常打开的Li
    const clickSetDay = (index) => {
        setDayArr((item) => {
            let currentItem = JSON.parse(JSON.stringify(item));
            currentItem[index].click = !currentItem[index].click;
            return currentItem;
        });
    };

    useEffect(() => {
        getClockSetting().then((res) => {
            let current = JSON.parse(JSON.stringify(currentDayArr));
            current.forEach((element, index) => {
                if (res.data.includes(element.day)) {
                    current[index].click = true;
                }
            });
            setDayArr(current);
            setDayArrs(current);
        });
    }, []);

    return (
        <>
            <HeadBack background={"#FFFFFF"} backTit={""} isHome="back"></HeadBack>

            {/* 内容部分 */}
            <div className="setContainer">
                {/* <div className='backEmpty'></div> */}

                {/* 头部设置按钮 */}
                <div className="setHeadBox">
                    <div className="setHeadTit">设置</div>
                    <div className="setHeadName">{location.state.name}</div>
                </div>

                {/* 线 */}
                <div className="setLineBox">
                    <div className="setLine"></div>
                </div>

                {/* 日常打卡设置 */}
                <div className="setDayBox">
                    <div className="setDayTit">
                        <div>日常运动打卡设置</div>
                        <div className="setDayTxt">设置后将会自动打卡，打卡后会统计和展示日常运动中的卡路里、步数和中高强度活动的时长数据</div>
                    </div>
                    <div className="setDayRight" onClick={() => setVisibleDay(true)}>
                        <p className="setDayRightTxt">
                            {dayArrs
                                .filter((item) => item.click)
                                .map((item, index) => (
                                    <span key={index}>{item.name}</span>
                                ))}
                        </p>
                        <img src={arrowImg} className="setDayRightIcon" alt="" />
                    </div>
                </div>

                <ExitCompany type="setting"></ExitCompany>
            </div>

            {/* 设置日常打卡弹出层 */}
            <Popup
                visible={visibleDay}
                onMaskClick={() => {
                    setVisibleDay(false);
                }}
                bodyStyle={{
                    borderTopLeftRadius: "23px",
                    borderTopRightRadius: "23px",
                    height: "12.61rem",
                }}
            >
                <div className="setExitPopupTit">日常运动打卡设置</div>
                <div className="setDayUl">
                    {dayArr.map((item, index) => (
                        <div className="setDayLi" key={index}>
                            <div className="setDayLiTxt">{item.name}</div>
                            <div
                                className="setDayLiSelect"
                                onClick={() => clickSetDay(index)}
                            >
                                <img
                                    className="setDayLiSelectIcon"
                                    src={item.click ? selectCurImg : selectImg}
                                    alt=""
                                />
                            </div>
                        </div>
                    ))}
                </div>

                <div className="setExitBtnBox">
                    <div className="setExitBtnCancel" onClick={clickDayBtnCancel}>
                        取消
                    </div>
                    <div className="setExitBtnFix" onClick={clickDayBtnFix}>
                        确定
                    </div>
                </div>
            </Popup>
        </>
    );
}
